NONE_MODE = 0;
INPUT_MODE = 1;
SELECTION_MODE = 2;

var current_mode = NONE_MODE;

function show_input_panel() {
    arr = im.getInput();
    h = '';
    for (i=0; i<arr.length; i++) {
        h += '<span class="input-char">'+arr[i]+'</span>';
    }
    $('#input-panel').html(h);
}
function show_option_panel() {
    arr = im.getCurrentOption();
    if (arr.length > 0) {
        h = '';
        //h = '';
        for (i=0; i<arr.length; i++) {
            number = (i+1) % im.pagesize;
            h += '<span class="option-char" alt="'+arr[i]+'"><sup class="option-char-index" style="visibility: hidden">'+number+' </sup>'+arr[i]+'</span>';
        }
        //h += '';
        $('#option-panel').html(h);
        
        // add selection interaction
        $('.option-char').click(function () {
            // console.log($(this).attr('alt'));
            pre_value = $('#char-result').val();
            $('#char-result').val(pre_value + $(this).attr('alt'));
            im.resetContext();
            current_mode = NONE_MODE;
            show_context();
        }).hover(function () {
            $(this).addClass('option-char-border');
        }, function () {
            $(this).removeClass('option-char-border');
        });
    }
    if (im.hasPreviousPage()) {
        $('#previous-page-sign').css({'visibility':'visible'});
    } else {
        $('#previous-page-sign').css({'visibility':'hidden'});
    }
    if (im.hasNextPage()) {
        $('#next-page-sign').css({'visibility':'visible'});
    } else {
        $('#next-page-sign').css({'visibility':'hidden'});
    }
}

function show_context() {
    //console.log('current_mode: '+current_mode);
    //console.log('input: '+im.getContext()['input']);
    //console.log(im.getContext()['option']);
    console.log('currentpage: '+im.getContext()['currentpage']);
    console.log('has previous: '+im.hasPreviousPage());
    console.log('has next: '+im.hasNextPage());
    $('#input-panel').html('');
    $('#option-panel').html('');
    
    switch (current_mode) {
    case NONE_MODE:
        if ($('#panel-container').is(':visible')) {
            $('#panel-container').hide('drop', {direction: "down", easing: "easeOutQuint"}, 350);;
        }
        break;
    case INPUT_MODE:
        if ($('#panel-container').css('display') == 'none') {
            $('#panel-container').show('drop', {direction: "down", easing: "easeOutQuint"}, 350);
        }
        show_input_panel();
        show_option_panel();
        break;
    case SELECTION_MODE:
        show_input_panel();
        show_option_panel();
        $('.option-char-index').css({'visibility': 'visible'});
        break;
    default:
        ;
    }
}

function initial_events() {
    $('#copy-result').click(function() {
        console.log('copy-result');
    });
    $('#empty-result').click(function() {
        console.log('empty-result');
    });
    
    panel_arr = ['button-delete', 'button-ok', 'previous-page', 'next-page'];
    for (i=0; i<panel_arr.length; i++) {
        $('#'+panel_arr[i]).hover(function () {
            $(this).addClass('hand-pointer');
            $(this).css({'background-image':'url(/sim/images/key_fw.png)'});
        }, function () {
            $(this).removeClass('hand-pointer');
            $(this).css({'background-image':'url(/sim/images/key-pad.png)'});
        });
    }
    
    sel_arr = ['sel-pinyin', 'sel-stroke', 'sel-upperchar', 
        'sel-lowerchar', 'sel-number'];
    for (i=0; i<sel_arr.length; i++) {
        $('#'+sel_arr[i]).click(function () {
            console.log($(this).attr('id'));
        }).hover(function () {
            $(this).addClass('hand-pointer');
        }, function () {
            $(this).removeClass('hand-pointer');
        });
    }
    
    button_arr = ['button1', 'button2', 'button3', 'button4', 'button5', 'button6', 
        'button7', 'button8', 'button9', 'button0', 'buttonstar', 'buttonwell'];
    for (i=0; i<button_arr.length; i++) {
        $('#'+button_arr[i]).click(function () {
            if (current_mode == SELECTION_MODE) {
                idx = parseInt($(this).attr('id').substr(6));
                if (isNaN(idx) == false) {
                    arr = im.getCurrentOption();
                    idx -= 1;
                    if (idx<0) {idx += im.pagesize};
                    if (undefined != arr[idx]) {
                        pre_value = $('#char-result').val();
                        $('#char-result').val(pre_value + arr[idx]);
                        im.resetContext();
                        current_mode = NONE_MODE;
                    }
                }
            } else {
                im.processInput($(this).attr('id'));
                im.updateContext();
                if (im.getInput().length != 0) {
                    current_mode = INPUT_MODE;
                }
            }
            show_context();
        }).hover(function () {
            $(this).addClass('hand-pointer');
            $(this).css({'background-image':'url(/sim/images/key_fw.png)'});
        }, function () {
            $(this).removeClass('hand-pointer');
            $(this).css({'background-image':'url(/sim/images/key-pad.png)'});
        });
    }

    $('#previous-page').click(function () {
        switch (current_mode) {
        case NONE_MODE:
            break;
        case INPUT_MODE:
        case SELECTION_MODE:
            im.previousPage();
            break;
        default:
            ;
        }
        show_context();
    });
    $('#next-page').click(function () {
        switch (current_mode) {
        case NONE_MODE:
            break;
        case INPUT_MODE:
        case SELECTION_MODE:
            im.nextPage();
            break;
        default:
            ;
        }
        show_context();
    });
    $('#button-ok').click(function () {
        switch (current_mode) {
        case NONE_MODE:
            break;
        case INPUT_MODE:
            current_mode = SELECTION_MODE;
            break;
        case SELECTION_MODE:
            break;
        default:
            ;
        }
        show_context();
    });
    $('#button-delete').click(function() {
        switch (current_mode) {
        case NONE_MODE:
            // delete the last char of result;
            if (0 != $('#char-result').val().length) {
                s = $('#char-result').val();
                $('#char-result').val(s.substr(0, s.length-1));
            }
            break;
        case INPUT_MODE:
            if (im.getContext()['input'].length > 1) {
                im.deleteInput();
                im.updateContext();
            } else {
                im.deleteInput();
                im.updateContext();
                current_mode = NONE_MODE;
            }
            break;
        case SELECTION_MODE:
            current_mode = INPUT_MODE;
            break;
        default:
            ;
        }
        show_context();
    });
    $('#copy-result').hover(function () {
        $(this).addClass('hand-pointer');
        $(this).css({'background-position':'-60px -20px'});
    }, function () {
        $(this).removeClass('hand-pointer');
        $(this).css({'background-position':'0px -20px'});
    }).click(function () {
        ;
    });
    $('#empty-result').hover(function () {
        $(this).addClass('hand-pointer');
        $(this).css({'background-position':'-90px -20px'});
    }, function () {
        $(this).removeClass('hand-pointer');
        $(this).css({'background-position':'-30px -20px'});
    }).click(function () {
        $('#char-result').val('');
    });
    
}

$(document).ready(function() {
    // initial documentElement div
    /*$('#main-panel').css({'width':document.documentElement.clientWidth+'px', 
        'height':(document.documentElement.clientHeight)+'px'});
    $(window).resize(function () {
        $('#main-panel').css({'width':document.documentElement.clientWidth+'px', 
        'height':(document.documentElement.clientHeight)+'px'});
    });*/
    
    // setting screen size 
    min_width = 900;
    min_height = 640;
    if ((document.documentElement.clientWidth<min_width) || (document.documentElement.clientHeight<min_height)) {
        //window.resizeTo(min_width, min_height+80);
        //window.moveTo(0, 0);
    }
    $('#panel-container').css({'display': 'none'});

    // initial button event
    initial_events();
    
    // initial input method
    im = new StrokeIM()
});
